<template>
	<view class="basic-home hidden">
		<view class="swiper-box border">
			dd
		</view>
		<view class="flex-auto hidden">
			<!-- <box-map @poitap="tapPoiItem"></box-map> -->
		</view>
		<view class="commercial-box ">
			<view class="item-box border ">
				
			</view>
			<view class="item-box flex flex-direction">
				<block v-for="(item,index) in 3" :key="index">
					<view class="item-box border">
						
					</view>
				</block>
			</view>
		</view>
		<!-- 各种弹窗 -->
		<view class="modals-box">
			<box-poi-info></box-poi-info>
		</view>
	</view>
</template>

<script>
import boxPoiInfo from '@/components/box-poi-info/box-poi-info.vue';
export default {
	components: {
		boxPoiInfo,
	},
	data() {
		return {
			latitude: '',
			longitude: '',
			covers: '',
		}
	},
	methods: {
		/**
		 * 点击POI
		 * 获取详情
		 * 
		 */
		tapPoiItem(e) {
			console.log('tapPoiItem', e)
		}
	}
}

</script>

<style lang="scss">
	.basic-home {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #FFF;
	}
	.swiper-box {
		width: 100%;
		height: 320rpx;
	}
	
	.commercial-box {
		width: 100%;
		height: 360rpx;
		display: flex;
		box-sizing: border-box;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10rpx;
		.item-box {
			width: calc(50% - 6rpx);
			box-sizing: border-box;
			.item-box {
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				&+.item-box {
					margin-top: 10rpx;
				}
			}
		}
	}

	.modals-box {
		position: relative;
		width: 100%;
		height: 0px;
	}
</style>